<template>
  <div class="orderitem">
      <div class="header">
        <flexbox>
            <flexbox-item span="200">订单号：{{item.order_no}}</flexbox-item>
            <flexbox-item style="text-align:right;">{{item.order_status_text}}</flexbox-item>
        </flexbox>
      </div>
      <div class="main">
          <flexbox class="title">
              <flexbox-item>订单商品</flexbox-item>
              <flexbox-item style="text-align:right;">{{item.create_time}}</flexbox-item>
          </flexbox>
          <flexbox :key="index" v-for="(goods,index) in item.order_goods" class="goods">
              <flexbox-item>美国肥牛</flexbox-item>
              <flexbox-item style="text-align:center;">{{goods.num}}件</flexbox-item>
              <flexbox-item style="text-align:right;">￥{{goods.num*goods.price}}</flexbox-item>
          </flexbox>
      </div>
      <flexbox justify="flex-end">
          <flexbox-item span="60"><router-link :to="{ name: 'orderDetail', params: { oid: item.oid }}">查看详情</router-link> </flexbox-item>
      </flexbox>
      <flexbox v-if="item.order_status==0||item.order_status==40" :gutter="15" class="action">
          <flexbox-item span="120">
              <x-button @click.native="cancel(10)" mini type="warn">取消</x-button>
          </flexbox-item>
          <flexbox-item>
             <x-button v-if="item.order_status==0" @click.native="accept(40)" mini type="primary">接受</x-button>
             <x-button v-if="item.order_status==40" @click.native="shipment(60)" mini type="primary">出货</x-button>
          </flexbox-item>
      </flexbox>
  </div>
</template>
<script>
import { Flexbox, FlexboxItem, XTable, XButton } from "vux";
export default {
  name: "orderitem",
  data() {
    return {};
  },
  props: ["item","index"],
  methods: {
    change_status(order_status){
        this.$http.post('/api/supplier.orders/order_status_change',{
            oid:this.item.oid,
            order_status,
        }).then(res=>{
            if(res.data.code){
                this.$emit('del',this.index)
            }
        })
    },
    cancel(order_status) {
        this.change_status(order_status)
    },
    accept(order_status) {
        this.change_status(order_status)
    },
    shipment(order_status){
        this.change_status(order_status)        
    }
  },
  components: {
    XTable,
    Flexbox,
    FlexboxItem,
    XButton
  }
};
</script>
<style scoped lang="less">
.orderitem {
  background-color: white;
  padding: 10px;
  margin-top: 5px;
  a {
    text-decoration: underline;
  }
}
.header {
  margin-bottom: 10px;
}
.title {
  font-size: 14px;
  margin-bottom: 5px;
}
.goods {
  line-height: 26px;
}
.main {
  margin-bottom: 10px;
  color: #606266;
}
.action {
  margin-top: 15px;
  button {
    width: 100%;
    font-size: 14px;
  }
}
</style>